/**
 * Created by felix on 2017/3/5.
 */
import React from 'react';
import { connect } from 'dva';
import _ from 'lodash';
import { Table, Button } from 'antd';
import Editor from './edit';
import styles from './index.less';
import StatusSwitch from '../../../components/statusSwitch';

function Charge({ charge, dispatch, chargeType, sumUnit, timeUnit }) {
    const { data, editorData } = charge;
    const toggleStatus = (id, v) => {
        console.log('v', v, id);
    };
    // 表格的表头项
    const columns = [
        {
            title: '收费类型名称',
            dataIndex: 'name',
        },
        {
            title: '所属类目',
            dataIndex: 'chargeTypeName',
        },
        {
            title: '单价',
            render: (t, r) => `${r.price}${r.sumUnit_name}/${r.timeUnit_name}`,
        },
        {
            title: '低消时长',
            render: (t, r) => `${r.atLeast}${r.timeUnit_name}`,
        },
        {
            title: '人数(个)',
            dataIndex: 'persons_count',
        },
        {
            title: '状态',
            render: (t, r) => <StatusSwitch status={t} onChange={toggleStatus.bind(null, r.id)}/>,
        },
        {
            title: '操作',
            render: (t, r) => {
                return (
                    <div>
                        <a onClick={onEditorData.bind(null, r)}>编辑</a>
                    </div>
                );
            },
        },
    ];
    const onEditorData = (data) => {
        dispatch({
            type: 'charge/editorVisible',
            payload: { editorData: data },
        });
    };
    const editProps = {
        name: '收费数据',
        ns: 'charge',
        isNew: _.isEmpty(editorData),
        dispatch,
        chargeType,
        sumUnit,
        timeUnit,
    };
    return (
        <div className={styles.storeInfo}>
            <div className="buttonWrap">
                <Button type="primary" onClick={onEditorData.bind(null, {})}>添加收费类型</Button>
            </div>
            <Table
                rowKey="id"
                columns={columns}
                dataSource={data}
            />
            <Editor {...{ ...charge, ...editProps }}/>
        </div>
    );
}

function mapStateToProps({ charge, app: { baseData: { chargeType, sumUnit, timeUnit } } }) {
    return { charge, chargeType, sumUnit, timeUnit };
}

export default connect(mapStateToProps)(Charge);
